<template>
  <div>
    <div class="top">我的预约</div>
    <div class="card" v-for="item in list" :key="item.id">
      <div class="card_left">
        <h3>大厅 (3-5人桌)</h3>
        <p>预定时间: 12月12号 12:30</p>
        <p>就餐人数: 6人</p>
      </div>
      <div class="card_right">
        <span>等待确认</span>
        <img
          id="u12"
          src="https://axhub.im/pro/221031c5a692ef70/images/我的预约/u2.png"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list:[
        {id:1},
        {id:2},
        {id:3},
        {id:4},
        {id:5},
        {id:6},
      ]
    }
  }
};
</script>

<style scoped>
.top {
  text-align: center;
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
#u12 {
  width: 25px;
  height: 25px;
}
h3 {
  color: #666666;
  font-weight: 700;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-size: 14px;
  line-height: 40px;
}
p {
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  color: #666666;
  line-height: 20px;
}
.card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(242, 242, 242, 1);
  height: 109px;
}
.card_right {
  display: flex;
  justify-content: center;
}
.card_right span {
  font-family: "微软雅黑";
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 15px;
  line-height: 25px;
  width: 66px;
  text-align: center;
  margin-right: 10px;
}
</style>